<template>
  <div class="progress-radar-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>学习进度与能力成长</span>
          <div class="header-actions">
            <el-select
              v-model="selectedMajor"
              placeholder="选择专业"
              style="width: 180px; margin-right: 10px"
              @change="resetView"
            >
              <el-option
                v-for="item in majorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </template>
      <div class="progress-radar-main">
        <div class="progress-radar-top">
          <div class="progress-ring">
            <div ref="progressChartRef" class="progress-echart"></div>
            <div class="progress-center">
              <div class="progress-percent">{{ progressPercent }}%</div>
              <div class="progress-label">已修课程</div>
              <div class="progress-count">{{ completedCount }}/{{ totalCount }}</div>
            </div>
          </div>
          <div class="radar-area">
            <div ref="radarChartRef" class="radar-echart"></div>
          </div>
        </div>
        <div class="unlock-title">课程解锁区</div>
        <div class="courses-unlock-row">
          <div
            v-for="course in courses"
            :key="course.id"
            class="unlock-course-card"
            :class="{
              completed: course.completed,
              planned: course.planned && !course.completed,
              locked: !course.completed && !course.planned
            }"
            @click="openCourseDetail(course)"
          >
            <div class="unlock-icon">
              <transition name="unlock-bounce">
                <span v-if="course.completed" class="icon-complete">✓</span>
                <span v-else-if="course.planned" class="icon-planned">★</span>
                <span v-else class="icon-locked">🔒</span>
              </transition>
            </div>
            <div class="unlock-name">{{ course.name }}</div>
            <div class="unlock-meta">
              <el-tag :type="course.type === 'required' ? 'danger' : 'warning'" size="small">
                {{ course.type === 'required' ? '必修' : '选修' }}
              </el-tag>
              <span class="credit">{{ course.credit }} 学分</span>
            </div>
          </div>
        </div>
      </div>
      <el-drawer
        v-model="showDetailDrawer"
        :title="detailCourse?.name || '课程详情'"
        size="400px"
        direction="rtl"
        :with-header="true"
      >
        <template v-if="detailCourse">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="课程编码">{{ detailCourse.code }}</el-descriptions-item>
            <el-descriptions-item label="学分">{{ detailCourse.credit }}</el-descriptions-item>
            <el-descriptions-item label="课程类型">{{ getCourseTypeName(detailCourse.type) }}</el-descriptions-item>
            <el-descriptions-item label="推荐学期">{{ detailCourse.recommendSemester }}</el-descriptions-item>
            <el-descriptions-item label="先修课程">
              <template v-if="detailCourse.prerequisites && detailCourse.prerequisites.length > 0">
                <el-tag
                  v-for="prereq in detailCourse.prerequisites"
                  :key="prereq"
                  type="info"
                  effect="plain"
                  class="prereq-tag"
                >
                  {{ getCourseName(prereq) }}
                </el-tag>
              </template>
              <template v-else>无</template>
            </el-descriptions-item>
            <el-descriptions-item label="课程简介">{{ detailCourse.description }}</el-descriptions-item>
          </el-descriptions>
          <div class="drawer-actions">
            <el-button
              v-if="!detailCourse.completed"
              type="success"
              @click="markAsCompleted(detailCourse)"
              >标记为已修</el-button
            >
            <el-button
              v-if="!detailCourse.completed && !detailCourse.planned"
              type="primary"
              @click="markAsPlanned(detailCourse)"
              >计划修读</el-button
            >
          </div>
        </template>
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 专业选项
const majorOptions = [
  { label: '计算机科学与技术', value: 'computer_science' },
  { label: '软件工程', value: 'software_engineering' },
  { label: '人工智能', value: 'artificial_intelligence' },
  { label: '网络工程', value: 'network_engineering' }
]
const selectedMajor = ref('computer_science')

// 课程数据（同前，略）
const coursesData = {
  computer_science: [
    { id: 'CS1001', code: 'CS1001', name: '计算机导论', type: 'required', credit: 2, recommendSemester: '大一上学期', prerequisites: [], description: '介绍计算机科学的基本概念、发展历史、应用领域以及未来趋势。', completed: true, planned: false, module: '基础理论' },
    { id: 'CS1002', code: 'CS1002', name: '程序设计基础(C语言)', type: 'required', credit: 4, recommendSemester: '大一上学期', prerequisites: [], description: '介绍C语言编程基础，包括基本语法、数据类型、控制结构、函数、数组、指针等内容。', completed: true, planned: false, module: '编程与算法' },
    { id: 'MA1001', code: 'MA1001', name: '高等数学', type: 'required', credit: 5, recommendSemester: '大一上学期', prerequisites: [], description: '介绍微积分、极限、微分方程等高等数学基础知识。', completed: true, planned: false, module: '基础理论' },
    { id: 'CS1003', code: 'CS1003', name: '离散数学', type: 'required', credit: 4, recommendSemester: '大一下学期', prerequisites: ['MA1001'], description: '介绍集合论、图论、组合数学、数理逻辑等离散数学基础知识。', completed: true, planned: false, module: '基础理论' },
    { id: 'CS1004', code: 'CS1004', name: '面向对象程序设计(Java)', type: 'required', credit: 4, recommendSemester: '大一下学期', prerequisites: ['CS1002'], description: '介绍Java语言和面向对象编程思想，包括类、对象、继承、多态、接口等概念。', completed: true, planned: false, module: '编程与算法' },
    { id: 'CS2001', code: 'CS2001', name: '数据结构', type: 'required', credit: 4, recommendSemester: '大二上学期', prerequisites: ['CS1004', 'CS1003'], description: '介绍各种基本数据结构，如数组、链表、栈、队列、树、图等，以及相关算法。', completed: true, planned: false, module: '编程与算法' },
    { id: 'CS2002', code: 'CS2002', name: '数字电路', type: 'required', credit: 3, recommendSemester: '大二上学期', prerequisites: ['CS1001'], description: '介绍数字系统、逻辑门、组合逻辑电路、时序逻辑电路等内容。', completed: true, planned: false, module: '系统与硬件' },
    { id: 'CS2003', code: 'CS2003', name: '算法设计与分析', type: 'required', credit: 3, recommendSemester: '大二下学期', prerequisites: ['CS2001'], description: '介绍算法设计技巧和算法分析方法，包括分治法、动态规划、贪心算法等。', completed: true, planned: false, module: '编程与算法' },
    { id: 'CS2004', code: 'CS2004', name: '计算机组成原理', type: 'required', credit: 4, recommendSemester: '大二下学期', prerequisites: ['CS2002'], description: '介绍计算机系统的基本组成部分，如CPU、存储器、I/O设备等的工作原理。', completed: false, planned: true, module: '系统与硬件' },
    { id: 'CS3001', code: 'CS3001', name: '操作系统', type: 'required', credit: 4, recommendSemester: '大三上学期', prerequisites: ['CS2004'], description: '介绍操作系统的基本概念、原理和实现方法，包括进程管理、内存管理、文件系统等。', completed: false, planned: false, module: '系统与硬件' },
    { id: 'CS3002', code: 'CS3002', name: '计算机网络', type: 'required', credit: 3, recommendSemester: '大三上学期', prerequisites: ['CS2004'], description: '介绍计算机网络的基本概念、协议和应用，包括TCP/IP协议族、网络应用开发等。', completed: false, planned: false, module: '网络与安全' },
    { id: 'CS3003', code: 'CS3003', name: '数据库系统', type: 'required', credit: 4, recommendSemester: '大三上学期', prerequisites: ['CS2001'], description: '介绍数据库系统的基本概念、原理和设计方法，包括关系模型、SQL语言、数据库设计等。', completed: false, planned: false, module: '数据与智能' },
    { id: 'CS3004', code: 'CS3004', name: '编译原理', type: 'required', credit: 4, recommendSemester: '大三下学期', prerequisites: ['CS2001', 'CS2003'], description: '介绍编译器的基本工作原理，包括词法分析、语法分析、语义分析、中间代码生成、代码优化等。', completed: false, planned: false, module: '编程与算法' },
    { id: 'CS3005', code: 'CS3005', name: '软件工程', type: 'required', credit: 3, recommendSemester: '大三下学期', prerequisites: ['CS3003'], description: '介绍软件开发的工程化方法，包括需求分析、系统设计、编码实现、测试验证等。', completed: false, planned: false, module: '工程与项目' },
    { id: 'CS4001', code: 'CS4001', name: '计算机系统结构', type: 'elective', credit: 3, recommendSemester: '大四上学期', prerequisites: ['CS3001'], description: '深入介绍计算机系统结构，包括指令集架构、流水线、存储层次、多处理器系统等。', completed: false, planned: false, module: '系统与硬件' },
    { id: 'CS4002', code: 'CS4002', name: '人工智能', type: 'elective', credit: 3, recommendSemester: '大四上学期', prerequisites: ['CS2003', 'MA1001'], description: '介绍人工智能的基本概念、原理和应用，包括搜索算法、知识表示、机器学习等。', completed: false, planned: false, module: '数据与智能' },
    { id: 'CS4003', code: 'CS4003', name: '分布式系统', type: 'elective', credit: 3, recommendSemester: '大四下学期', prerequisites: ['CS3001', 'CS3002'], description: '介绍分布式系统的基本概念、原理和实现技术，包括通信、命名、同步、一致性、容错等。', completed: false, planned: false, module: '网络与安全' },
    { id: 'CS4004', code: 'CS4004', name: '信息安全', type: 'elective', credit: 3, recommendSemester: '大四下学期', prerequisites: ['CS3002'], description: '介绍信息安全的基本概念和技术，包括密码学、访问控制、网络安全、软件安全等。', completed: false, planned: false, module: '网络与安全' }
  ]
}

const moduleList = [
  '基础理论',
  '编程与算法',
  '系统与硬件',
  '网络与安全',
  '数据与智能',
  '工程与项目'
]

const courses = computed(() => coursesData[selectedMajor.value])
const totalCount = computed(() => courses.value.length)
const completedCount = computed(() => courses.value.filter(c => c.completed).length)
const plannedCount = computed(() => courses.value.filter(c => c.planned && !c.completed).length)
const progressPercent = computed(() => Math.round(completedCount.value / totalCount.value * 100))

// 雷达图数据
const radarData = computed(() => {
  // 每个模块的完成率
  return moduleList.map(module => {
    const moduleCourses = courses.value.filter(c => c.module === module)
    if (moduleCourses.length === 0) return 0
    const completed = moduleCourses.filter(c => c.completed).length
    return Math.round(completed / moduleCourses.length * 100)
  })
})

// 环形进度条
const progressChartRef = ref()
let progressChart = null
function renderProgressChart() {
  if (!progressChartRef.value) return
  if (!progressChart) progressChart = echarts.init(progressChartRef.value)
  progressChart.setOption({
    series: [
      {
        type: 'pie',
        radius: ['80%', '100%'],
        avoidLabelOverlap: false,
        silent: true,
        label: { show: false },
        data: [
          { value: completedCount.value, name: '已修', itemStyle: { color: '#67C23A' } },
          { value: plannedCount.value, name: '计划', itemStyle: { color: '#409EFF' } },
          { value: totalCount.value - completedCount.value - plannedCount.value, name: '未修', itemStyle: { color: '#E4E7ED' } }
        ]
      }
    ]
  })
}

// 雷达图
const radarChartRef = ref()
let radarChart = null
function renderRadarChart() {
  if (!radarChartRef.value) return
  if (!radarChart) radarChart = echarts.init(radarChartRef.value)
  radarChart.setOption({
    radar: {
      indicator: moduleList.map(m => ({ name: m, max: 100 })),
      radius: 80,
      splitNumber: 4,
      axisName: { color: '#409EFF', fontSize: 14 },
      splitLine: { lineStyle: { color: '#dbeafe' } },
      splitArea: { areaStyle: { color: ['#f0faff', '#fff'] } },
      axisLine: { lineStyle: { color: '#b3b3b3' } }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: radarData.value,
            name: '能力覆盖',
            areaStyle: { color: 'rgba(64,158,255,0.2)' },
            lineStyle: { color: '#409EFF', width: 3 },
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: { color: '#409EFF' }
          }
        ]
      }
    ]
  })
}

// 响应式渲染
onMounted(() => {
  renderProgressChart()
  renderRadarChart()
  window.addEventListener('resize', () => {
    progressChart && progressChart.resize()
    radarChart && radarChart.resize()
  })
})
watch([completedCount, plannedCount, totalCount], () => {
  renderProgressChart()
})
watch(radarData, () => {
  renderRadarChart()
})
watch(selectedMajor, () => {
  setTimeout(() => {
    renderProgressChart()
    renderRadarChart()
  }, 100)
})

function resetView() {
  setTimeout(() => {
    renderProgressChart()
    renderRadarChart()
  }, 100)
}

// 课程详情弹窗
const showDetailDrawer = ref(false)
const detailCourse = ref(null)
function openCourseDetail(course) {
  detailCourse.value = course
  showDetailDrawer.value = true
}
const getCourseName = (courseId) => {
  const course = courses.value.find(c => c.id === courseId)
  return course ? course.name : courseId
}
const getCourseTypeName = (type) => {
  const typeMap = {
    'required': '必修课',
    'elective': '选修课'
  }
  return typeMap[type] || type
}
function markAsCompleted(course) {
  course.completed = true
  course.planned = false
  ElMessage.success(`已标记 ${course.name} 为已修课程！`)
  showDetailDrawer.value = false
  renderProgressChart()
  renderRadarChart()
}
function markAsPlanned(course) {
  course.planned = true
  ElMessage.info(`已将 ${course.name} 加入计划修读！`)
  renderProgressChart()
  renderRadarChart()
}
</script>

<style scoped>
.progress-radar-container {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-actions {
  display: flex;
  align-items: center;
}
.progress-radar-main {
  margin-top: 18px;
}
.progress-radar-top {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}
.progress-ring {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-echart {
  width: 200px;
  height: 200px;
}
.progress-center {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.progress-percent {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 2px;
}
.progress-label {
  font-size: 15px;
  color: #909399;
}
.progress-count {
  font-size: 14px;
  color: #b3b3b3;
  margin-top: 2px;
}
.radar-area {
  width: 260px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-echart {
  width: 220px;
  height: 220px;
}
.unlock-title {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 12px;
  margin-left: 8px;
}
.courses-unlock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.unlock-course-card {
  width: 150px;
  min-height: 110px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: box-shadow 0.2s, transform 0.2s, border 0.2s;
  opacity: 1;
  animation: unlock-fadein 0.7s;
}
.unlock-course-card.completed {
  border-color: #67C23A;
  background: linear-gradient(135deg, #e8f9e4 0%, #f6fff7 100%);
  animation: unlock-bounce 0.7s;
}
.unlock-course-card.planned {
  border-color: #409EFF;
  background: linear-gradient(135deg, #eaf3ff 0%, #f6faff 100%);
}
.unlock-course-card.locked {
  opacity: 0.5;
  filter: grayscale(0.2);
}
.unlock-icon {
  font-size: 28px;
  margin-bottom: 6px;
  min-height: 32px;
}
.icon-complete {
  color: #67C23A;
  font-size: 28px;
  font-weight: bold;
}
.icon-planned {
  color: #409EFF;
  font-size: 26px;
}
.icon-locked {
  color: #b3b3b3;
  font-size: 24px;
}
.unlock-name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  text-align: center;
}
.unlock-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.credit {
  font-size: 13px;
  color: #909399;
}
.prereq-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
.drawer-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}
@keyframes unlock-bounce {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes unlock-fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
</style> 